<template>
	<div class="flex_row">
		<div class="flex_col m5 card flex_start_self" style="padding: 20px;">
			<div class="flex_row_center">
				<label>类型</label>
				<el-select class="ml5" v-model="ctx.c_type" style="width: 300px;">
					<el-option v-for="(item, index) in FIRM_TYPE" :key="index" :label="item" :value="index"></el-option>
				</el-select>
			</div>
			<div class="flex_row_center mt5">
				<label>版本</label>
				<el-input class="ml5" v-model="ctx.version" clearable style="width: 300px;" />
			</div>
			<div class="flex_row_center mt5">
				<label>描述</label>
				<el-input type="textarea" class="ml5" v-model="ctx.description" clearable style="width: 300px;" />
			</div>
			<div class="flex_col_center mt5">
				<el-upload
					:on-change="onChange"
					:limit="1"
					:auto-upload="false"
					:show-file-list="true"
					:accept="accept"
					class="flex_center_self"
					>
					<el-button slot="trigger" type="warning">选择文件</el-button>
				</el-upload>
				<el-button type="primary" @click="onClickUpload">上传</el-button>
			</div>
		</div>
		<div class="flex_col m5">
			<div class="flex_row_center">
				<label>类型</label>
				<el-select class="ml5" v-model="selectType" style="width: 300px;">
					<el-option v-for="(item, index) in FIRM_TYPE" :key="index" :label="item" :value="index"></el-option>
				</el-select>
				<el-button @click="onClickQuery" class="ml5" type="primary">查询</el-button>
			</div>
			<div class="flex_row" style="flex-wrap: wrap;">
				<FirmItem v-for="(item, index) in queryFirms" :cb="delcb" :key="index" :firm="item"/>
			</div>
			
		</div>
	</div>

</template>

<script lang="ts" setup>
import { firmDel, firmQuery, uploadFirm } from '@/service/http';
import { FIRM_TYPE, type Firm } from '@/service/model';
import { runAction } from '@/utils/ui';
import type { UploadFile } from 'element-plus';
import { reactive, ref, watch } from 'vue';
import FirmItem from './FirmItem.vue';

interface Ctx {
	c_type: number,
	description: string,
	version: string,
}

const ctx = reactive<Ctx>({
	c_type: 0,
	description: '',
	version: '',
});

let globaleFile: File | null = null;

const accept = ref('.apk');

const selectType = ref(0);
const queryFirms = ref<Firm[]>([]);

watch(ctx, () => {
	if (ctx.c_type == 0) {
		accept.value = ".apk"
	} else {
		accept.value = ".bin"
	}
})

function onChange(file: UploadFile) {
	globaleFile = file.raw!!;
	onClickUpload();
}

async function onClickUpload() {
	runAction('上传', "上传中", async (dialog) => {
		if (globaleFile == null) {
			throw '请选择文件';
		}
		if (ctx.version.length == 0) {
			throw '请输入版本号';
		}
		if (ctx.description.length == 0) {
			throw '请输入固件描述信息';
		}
		const file = globaleFile!!;
		const data = new FormData();
		data.append('c_type', `${ctx.c_type}`);
		data.append('description', ctx.description);
		data.append('version', ctx.version);
		data.append('file', file, file.name);
		await uploadFirm(data, (prog) => {
			dialog.setMsg(`进度:${prog}%`);
		})
	});
}

async function onClickQuery() {
	runAction('查询', '查询中', async () => {
		queryFirms.value = await firmQuery(selectType.value);
	})
}

async function delcb(id: number) {
	runAction('删除', '删除中', async () => {
		await firmDel(id);
		queryFirms.value = await firmQuery(selectType.value);
	})
}

</script>
